<div class="panel panel-default-custom" ng-controller="MessagingController">
    <div class="panel-heading handle bold">
        {{messagingWidget.title| translate}}

        <span class="pull-right widget-link">
            <a class="small-horizontal-spacing" href ng-click="expandCollapse(messagingWidget)">
                <span ng-show="messagingWidget.expand"><i class="fa fa-chevron-up" ng-attr-title="{{collapseLabel}}"></i></span>
                <span ng-show="!messagingWidget.expand"><i class="fa fa-chevron-down" ng-attr-title="{{expandLabel}}"></i></span>
            </a>
            <a ng-show="userAuthority.canAdministerDashboard || !lockedList[selectedProgram.id]" class="small-horizontal-spacing" href ng-click="removeWidget(messagingWidget)" ng-attr-title="{{removeLabel}}"><i class="fa fa-times-circle"></i></a>            
        </span>        
    </div>
    <div ng-show="messagingWidget.expand" class="panel-body dashboard-widget-container">
        <!-- sms section begins -->
        <div ng-if="!selectedProgram.access.data.write" class="alert alert-warning">
            {{ 'no_program_write_access' | translate}}
        </div>
        <div ng-if="selectedProgram.access.data.write">
            <form name="messagingForm">
                <div>
                    <ui-select ng-model="model.selectedMessageType"
                               theme="select2"
                               on-select=""
                               ng-disabled="selectedOrgUnit.closedStatus"
                               style="width:100%;">
                        <ui-select-match allow-clear="true" class="form-control-ui-select" ng-attr-placeholder="Message Type">{{model.selectedMessageType| translate}}</ui-select-match>
                        <ui-select-choices  repeat="messageType in model.messageTypes">
                            {{messageType | translate}}
                        </ui-select-choices>
                    </ui-select>
                    <div ng-if="model.selectedMessageType === 'sms'">
                        <input type="text"
                               name="phoneNumber"
                               ng-attr-placeholder="{{'phone_number' | translate}}"
                               class="form-control"
                               ng-required="true"
                               ng-disabled="selectedOrgUnit.closedStatus"
                               ng-model="message.phoneNumber"/>
                        <span ng-show="messagingForm.submitted && messagingForm.phoneNumber.$invalid" class="error">{{'required'| translate}}</span>
                        <textarea name="message"
                              class="form-control"
                              rows="3"
                              maxlength="160"
                              ng-model="message.smsMessage"
                              ng-disabled="selectedOrgUnit.closedStatus"
                              ng-required="true"
                              ng-attr-placeholder="{{'message'| translate}}"></textarea>
                            <span ng-show="messagingForm.submitted && messagingForm.message.$invalid" class="error">{{'required'| translate}}</span>
                    </div>
                    <div ng-if="model.selectedMessageType === 'email'">
                        <input type="email"
                               name="emailId"
                               ng-attr-placeholder="{{'email_address' | translate}}"
                               class="form-control"
                               ng-required="true"
                               ng-disabled="selectedOrgUnit.closedStatus"
                               ng-model="message.emailId">
                        <span ng-show="messagingForm.submitted && messagingForm.emailId.$invalid" class="error">{{'wrong_email'| translate}}</span>
                        <input type="text"
                               name="subject"
                               ng-attr-placeholder="{{'email_subject' | translate}}"
                               class="form-control"
                               ng-required="true"
                               ng-disabled="selectedOrgUnit.closedStatus"
                               ng-model="message.emailSubject"/>
                        <span ng-show="messagingForm.submitted && messagingForm.subject.$invalid" class="error">{{'required'| translate}}</span>
                        <textarea name="emailmessage"
                                  class="form-control"
                                  rows="3"
                                  maxlength="1200"
                                  ng-model="message.emailMessage"
                                  ng-disabled="selectedOrgUnit.closedStatus"
                                  ng-required="true"
                                  ng-attr-placeholder="{{'message'| translate}}"></textarea>
                        <span ng-show="messagingForm.submitted && messagingForm.emailmessage.$invalid" class="error">{{'required'| translate}}</span>
                    </div>
                    <div ng-if="model.selectedMessageType">
                        <div class="vertical-spacing">
                            <button type="button"
                                    class="btn btn-primary"
                                    ng-disabled="selectedOrgUnit.closedStatus"
                                    ng-click="sendMessage(messagingForm)">
                                    {{'send'| translate}}
                            </button>
                            <button type="button"
                                    class="btn btn-default small-horizontal-spacing"
                                    ng-disabled="selectedOrgUnit.closedStatus"
                                    ng-click="clear()">
                                    {{'clear'| translate}}
                            </button>
                        </div>
                    </div>
                </div>
            </form>
            <!-- sms section ends -->
        </div>

        
    </div>
</div>
